<script setup>
import {Message} from '@arco-design/web-vue'
import {route} from "ziggy-js";

const action = route('admin.upload.image')
const modelValue = defineModel('modelValue',{type: String, default: ''})
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ?? '';
const headers = {
    'X-CSRF-TOKEN': csrfToken,
}

const handleSuccess = (currentFile) => {
    if (currentFile.response.code === 200) {
        modelValue.value = currentFile.response.data.url
    }else{
        Message.error('图片上传失败')
    }
}

const handleError = () => {
    Message.error('图片上传失败')
}
</script>

<template>
    <a-upload
        :action="action"
        :headers
        :show-file-list="false"
        :with-credentials="true"
        name="file"
        @error="handleError"
        @success="handleSuccess"
    >
        <template #upload-button>
            <div class="arco-upload-list-item">
                <div v-if="modelValue" class="arco-upload-list-picture custom-upload-avatar">
                    <img :src="modelValue" alt="头像" class="border-dashed border rounded-sm border-sky-600"/>
                    <div class="arco-upload-list-picture-mask">
                        <IconEdit/>
                    </div>
                </div>
                <div v-else class="arco-upload-picture-card">
                    <div class="arco-upload-picture-card-text">
                        <IconPlus/>
                    </div>
                </div>
            </div>
        </template>
    </a-upload>
</template>

<style scoped>

</style>
